import React from 'react';
import {Modal,Tag} from "antd-mobile"
let fitobj={// 处理展示数据
    roomtype:"户型",
    orienteds:"朝向",
    charact:"特色",
    floor:"楼层",
    price:"价格"
}
class Fit extends React.Component {
    state={
       isshow:0,// 是否展示弹框
       fit:{}// 条件
    }
    render() { 
        // 获取state的数据
        let {fit} =this.state
        return <div>
            <div onClick={()=>{
                this.setState({
                    isshow:1
                })
            }}>筛选</div>

            <Modal
                popup
                closable
                visible={this.state.isshow}
                onClose={()=>{
                    this.setState({
                        isshow:0
                    })
                }}
                animationType="slide-down"
                // afterClose={() => { alert('afterClose'); }}
                >
                {
                   // 获取对象键的集合 Object.keys(obj)
                   Object.keys(fit).map((v,k)=>{
                       return <div>
                           <h3>
                           {fitobj[v]}
                           </h3>
                           <div style={{
                               display:"flex",
                               justifyContent:"space-between",
                               flexWrap:"wrap",
                               
                           }}>
                               {
                                   fit[v].map((i,j)=>{
                                       return <div style={{
                                           margin:"5px"
                                       }}>
                                           <Tag >
                                           {i.name}
                                           </Tag>
                                       </div>
                                   })
                               }
                           </div>
                       </div>
                   })
                }
                </Modal>
        </div>;
    }
    getCondition(){
        this.api.getCondition()
        .then(res=>{
            console.log(res);
            if(res.data.code==200){
                this.setState({
                    fit:res.data.msg
                })
            }
        })
    }
    componentDidMount(){
        this.getCondition()
    }
}
 
export default Fit;